<template>
  <div class="app-container"
       v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-input placeholder="考试名称"
                v-model="reqData.testName"
                style="width: 200px;"></el-input>
      <el-input placeholder="学生姓名"
                v-model="reqData.studentName"
                style="width: 200px;"></el-input>
      <el-input placeholder="学生身份证号"
                v-model="reqData.studentIdcard"
                style="width: 200px;"></el-input>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click.native.prevent="handleSearch">
        搜索
      </el-button>
      <el-button style="margin-left: 10px;"
                 type="primary"
                 icon="el-icon-edit"
                 @click.native.prevent="handleImport">
        导入
      </el-button>
    </div>
    <el-table border
              stripe
              highlight-current-row
              style="width: 100%;"
              :data="listData"
              :empty-text="emptyText">
      <el-table-column label="考试名称"
                       prop="studentScoreTestName"></el-table-column>
      <el-table-column label="姓名"
                       prop="userName"></el-table-column>
      <el-table-column label="身份证号"
                       prop="userIdcard"></el-table-column>
      <el-table-column label="总成绩"
                       prop="studentScore"></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background
                     :pager-count="pagerCount"
                     :page-size="reqData.perPage"
                     :current-page="reqData.curPage"
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :total="total">
      </el-pagination>
    </div>
    <el-dialog title="导入学生成绩"
               :visible.sync="dialogFormVisible">
      <el-form :model="importFormData"
               label-width="120px"
               label-position="left">
        <el-form-item label="考试名称">
          <el-input v-model="importFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="excel文件">
          <el-upload :on-success="uploadSuccess" :action="uploadUrl" :data="uploadData">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
          <a href="StudentScoreExample.xlsx"
             target="_blank">点击下载示例excel</a>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native.prevent="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary"
                   @click.native.prevent="doImport">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, del, importExcel } from '@/api/student_score'
import { errorMsg, successMsg } from '@/utils/my'

export default {
  inject: ['reload'],
  data () {
    return {
      reqData: {
        testName: '',
        studentName: '',
        studentIdcard: '',
        curPage: 1,
        perPage: 20
      },
      pagerCount: 13,
      total: 0,
      listData: [],
      loading: true,
      delRows: [],
      delIds: '',
      emptyText: '暂无任何数据',
      dialogFormVisible: false,
      importFormData: {
        name: '',
        excelUrl: ''
      },
      uploadData: {
        fileType: 'excel'
      },
      uploadUrl: process.env.VUE_APP_BASE_API + '/upload/backend'
    }
  },

  created () {
    this.fetchData()
  },

  methods: {

    pageChange (p) {
      this.reqData.curPage = p
      this.fetchData()
    },

    fetchData () {
      const that = this
      that.loading = true
      getList(that.reqData).then(res => {
        that.loading = false
        that.total = res.data.total
        that.listData = res.data.list
      })
    },

    handleSearch () {
      this.reqData.curPage = 1
      this.fetchData()
    },

    handleImport () {
      this.dialogFormVisible = true
    },

    uploadSuccess (res) {
      if (res.code != 20000) {
        return errorMsg(res.message)
      }
      this.importFormData.excelUrl = res.data.url
      successMsg(res.message)
    },

    doImport () {
      const that = this
      let d = that.importFormData
      if (d.name.length <= 0) {
        return errorMsg('请输入考试名称')
      }
      if (d.excelUrl.length <= 0) {
        return errorMsg('请上传excel文件')
      }
      that.dialogFormVisible = false
      that.loading = true
      importExcel(d).then(res => {
        that.loading = false
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        successMsg(res.message)
        that.reload()
      })
    }
  }
}
</script>

<style>
.filter-container {
  margin-bottom: 10px;
}

.pager {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>
